<template>
  <div id="app" class="app-container">
    <div class="header">
      <el-button type="primary" @click="initWebSocket"
        style="float: right; margin-top: 50px; margin-right: 100px;">返回</el-button>
    </div>
    <div class="content">
      <div class="right-box">
        <div class="score-header">
          <div style="color: #f8f9fa;font-weight: bold;font-size: 30px;">选手的分数为</div>
        </div>
        <div class="score-value-box">
          <span style="color: #f8f9fa;font-weight: bold;font-size: 80px;">99.99</span>
        </div>
      </div>
      <div id="main" class="chart-container" style="position: relative;top: 70px;">
        这是一个背景透明度为 0.5 的 div 元素
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'XsScoreView',
  components: {},
  data() {
    return {
      chart: null,
      data: [],
      colors: ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed', '#ff6347', '#4169e1', '#20b2aa'], // 定义颜色数组
      ws: null
    };
  },
  mounted() {
    this.initChart();
    this.initWebSocket();
  },
  beforeDestroy() {
    this.closeWebSocket();
  },
  methods: {
    initChart() {
      // 初始化数据
      for (let i = 0; i < 8; ++i) { // 修改为 8 条
        this.data.push(Math.round(Math.random() * 200));
      }

      // 基于准备好的dom，初始化echarts实例
      this.chart = echarts.init(document.getElementById('main'));

      // 设置初始选项
      this.chart.setOption({
        backgroundColor: 'rgba(255, 255, 255, 0.8)', // 背景颜色
        xAxis: {
          max: 'dataMax',
          axisLine: { lineStyle: { color: '#ccc' } },
          axisLabel: { color: '#333' }
        },
        yAxis: {
          type: 'category',
          data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'], // 修改为 8 条
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          max: 6, // 只显示最大的4个条形图
          axisLine: { lineStyle: { color: '#ccc' } },
          axisLabel: { color: '#333' }
        },
        series: [
          {
            realtimeSort: true,
            name: 'X',
            type: 'bar',
            data: this.data,
            label: {
              show: true,
              position: 'right',
              valueAnimation: true,
              color: '#333'
            },
            itemStyle: {
              color: (params) => {
                return this.colors[params.dataIndex]; // 根据索引选择颜色
              }
            }
          }
        ],
        legend: {
          show: true,
          textStyle: { color: '#333' }
        },
        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear'
      });
    },
    updateChart(data) {
      // 更新数据
      this.data = data;

      // 更新图表
      this.chart.setOption({
        series: [
          {
            type: 'bar',
            data: this.data,
            itemStyle: {
              color: (params) => {
                return this.colors[params.dataIndex]; // 根据索引选择颜色
              }
            }
          }
        ]
      });
    },
    initWebSocket() {
      // WebSocket URL
      const wsUrl = 'ws://localhost:8081/api/chat';

      // 创建 WebSocket 连接
      this.ws = new WebSocket(wsUrl);

      // 连接打开时触发
      this.ws.onopen = () => {
        console.log('WebSocket connection opened');
      };

      // 接收到消息时触发
      this.ws.onmessage = (event) => {
        const newData = JSON.parse(event.data);
        this.updateChart(newData);
      };

      // 连接关闭时触发
      this.ws.onclose = () => {
        console.log('WebSocket connection closed');
      };

      // 发生错误时触发
      this.ws.onerror = (error) => {
        console.error('WebSocket error:', error);
      };
    },
    closeWebSocket() {
      if (this.ws) {
        this.ws.close();
      }
    }
  }
};
</script>

<style scoped>
.app-container {
  width: 100%;
  height: 100vh;
  background-image: url('../assets/Snipaste_2024-11-25_01-42-12.png');
  /* 替换为你的背景图片路径 */
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 100px;
}

.header {
  width: 100%;
  position: absolute;
  top: 0;
  z-index: 10;
}

.content {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 50px;
}

.chart-container {
  width: 50%;
  height: 750px;
  background-color: rgba(255, 255, 255, 0);
  /* 背景色 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.right-box {
  width: 40%;
  height: 330px;
  border-radius: 20px;
  background: linear-gradient(to bottom right,
      rgba(235, 184, 133, 0.8),
      rgba(215, 164, 113, 0.4),
      rgba(195, 144, 93, 0.2));
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.score-header {
  width: 100%;
  height: 100px;
  background: linear-gradient(to bottom right,
      rgba(235, 184, 133, 0.8),
      rgba(215, 164, 113, 0.4),
      rgba(195, 144, 93, 0.2));
  border-radius: 20px 20px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.score-value-box {
  width: 100%;
  height: 200px;
  background: linear-gradient(to bottom right,
      rgba(66, 139, 202, 0.8),
      rgba(30, 144, 255, 0.4),
      rgba(0, 191, 255, 0.2));
  border-radius: 0 0 20px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
</style>
